<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="mask">
    <div class="center">
    <!-- 左箭头-->
    <a href="javascript:void(0)" class="left" @click="prev" v-show="index!=0">
        <img src="../img/left.png" width="50px" class="left">
    </a>
    <img :src="imgArr[index]" alt="" width="200px" height="300px">
    <!-- 右箭头-->
    <a href="javascript:void(0)" class="right" @click="next" v-show="index<imgArr.length-1">
        <img src="../img/right.png" width="50px" >
    </a>

    </div>
</div>

<script>
    var app = new Vue({
        el:"#mask",
        data:{
            imgArr:[
                "../img/1.jpg",
                "../img/2.jpg",
                "../img/3.jpg",
                "../img/4.jpg",
                "../img/5.jpg",
                "../img/6.jpg",
                "../img/7.jpg",
                "../img/8.jpg",
                "../img/9.jpg"

            ],
            index:0

        },
        methods:{
            prev:function () {
                this.index--;

            },
            next:function () {
                this.index++;

            }

        }
    })
</script>
</body>
</html>
